<!--
 * @Author: your name
 * @Date: 2021-12-09 23:41:44
 * @LastEditTime: 2021-12-19 21:37:58
 * @LastEditors: Please set LastEditors
 * @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 * @FilePath: \homeStayMS\src\main\resources\static\vue\common-components\AsideBar\AsideBar.vue
-->


<template>
  <section>
    <!-- 
      https://imgtu.com/i/TE9XEq
      https://s4.ax1x.com/2021/12/18/TE9XEq.png
     -->
    <!-- logo位置添加处 -->
    <div class="logo">
      <!-- 后端模式可以识别的路径代码 但是前端模式无法加载 -->
      <!-- <img src="static/images/logo.png" /> -->

      <!-- 尝试使用组件来显示图片 -->
      <el-image style="width: 60px; height: 60px" :src="logoImg"></el-image>
      <span>民宿管理系统</span>
    </div>

    <!-- 竖排的侧边栏 -->
    <el-menu
      class="aside-menu-container"
      mode="vertical"
      :default-active="selectSystemComputed"
      @select="selectItemChange"
      @open="selectItemChange"
      background-color="rgb(0,40,89)"
      text-color="#fff"
      active-text-color="#ffd04b"
    >
     <!-- <el-submenu index="storeManage">
        <template slot="title">门店管理</template>
        <el-menu-item index="RoomManage">房间管理</el-menu-item>
      </el-submenu>-->
      <el-menu-item index="storeManage">门店管理</el-menu-item>
      <el-menu-item index="RoomManage">房间管理</el-menu-item>
      <el-menu-item index="OrderManage">订单管理</el-menu-item>
      <el-menu-item index="IncomeCount">营收统计</el-menu-item>
      <el-menu-item index="EmployeeManage">员工管理</el-menu-item>
      <el-menu-item index="CustomerInfo">客人信息</el-menu-item>
    </el-menu>
  </section>
</template>

<script>
export default {
  name: 'AsideBar',

  props: {
    // 系统选择的项 默认为 门店管理
    selectItem: {
      default: 'shopManage',
    },
  },

  data() {
    return {
      /** logo图片的相对路径地址 */
      logoImg: 'https://s4.ax1x.com/2021/12/18/TE9XEq.png',
    };
  },

  computed: {
    selectSystemComputed() {
      return this.selectItem;
    },
  },

  methods: {
    // 选择项发生变化的回调函数
    selectItemChange(index) {
      this.$emit('update:selectItem', index);
    },
  },
};
</script>

<style scoped>
/* 侧边菜单容器修饰类 */
.aside-menu-container {
  width: 100%;
}

/*.aside-menu-container{*/
/*  color: rgb(182,194,208);*/
/*  background-color: rgb(51,65,87);*/
/*}*/

/*logo样式*/
.logo {
  display: flex;
  justify-content: center;
  align-items: center;
}

.logo span {
  font-size: 23px;
  color: #ffffff;
  font-weight: 200;
}
</style>
